<script setup>

import { computed,onMounted, ref  } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { useTicketStore } from '@/stores/tickets'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { message } from 'ant-design-vue'

use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, GridComponent])

const authStore = useAuthStore()
const ticketStore = useTicketStore()
const loading = ref(false)
onMounted(async () => {
  loading.value = true
  await ticketStore.initData()
  loading.value = false
})
const tickets = computed(() => ticketStore.tickets)
// 初始化数据
ticketStore.initData()

// 权限判断
const isAdmin = computed(() => authStore.userRole === 'admin')

// 表格列配置
const columns = [
  { title: 'ID', dataIndex: 'id' },
  { title: 'Project', dataIndex: 'project' },
  { 
    title: 'Overtime', 
    dataIndex: 'overtime',
    customRender: ({ text }) => text ? 'Yes' : 'No'
  },
  { title: 'Hours', dataIndex: 'hours' },
  { title: 'Created At', dataIndex: 'created_at' },
  {
    title: 'Action',
    slots: { customRender: 'action' }
  }
]

// 删除处理
const handleDelete = (id) => {
  ticketStore.deleteTicket(id)
}

// 图表配置
const chartOption = computed(() => {
  const projectHours = {}
  ticketStore.tickets.forEach(t => {
    projectHours[t.project] = (projectHours[t.project] || 0) + t.hours
  })

  return {
    title: { text: 'Project Hours Distribution' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: Object.keys(projectHours)
    },
    yAxis: { type: 'value' },
    series: [{
      data: Object.values(projectHours),
      type: 'bar',
      itemStyle: { color: '#1890ff' }
    }]
  }
})
const router = useRouter()
const logout = () => {
   authStore.logout()
  message.success('已安全退出系统')
  router.push('/login')
}

</script>

<template>
  <div class="home-container">
    <a-page-header title="工单管理系统">
      <template #extra>
             <a-popconfirm
        title="确定要退出登录吗？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="logout"
      >
        <a-button type="primary">退出登录</a-button>
      </a-popconfirm>
      </template>
    </a-page-header>

    <div class="content">
      <!-- 工单表格 -->
      <a-card title="工单列表" style="margin-bottom: 24px">
        
        <a-table 
          :dataSource="tickets" 
          :columns="columns" 
          :pagination="false"
          rowKey="id"
        >
          <template #action="{ record }">
            <a-button 
              v-if="isAdmin"
              type="link" 
              danger 
              @click="handleDelete(record.id)"
            >
              Delete
            </a-button>
          </template>
        </a-table>
      </a-card>

      <!-- 工时分布图表 -->
      <a-card title="Project Hours Distribution">
        <VChart class="chart" :option="chartOption" />
      </a-card>
    </div>
  </div>
</template>

<style scoped>
.chart {
  height: 400px;
  width: 100%;
}

.ant-table {
  margin: 16px 0;
}

</style>